@require '~styles/variables'
@require '~styles-lib/mixins'

.chat-window-wrap
	position: fixed
	display: flex
	justify-content: center
	align-items: flex-start
	z-index: $zindex-chat-window

.chat-window-back-close
	position: absolute
	top: 0
	right: 0
	bottom: 0
	left: 0
	background: transparent
	z-index: 0

.chat-window
	position: relative
	display: flex
	flex: auto
	justify-content: center
	width: 100%
	height: 100%
	z-index: 1

	@media $media-xs
		position: fixed
		top: 0
		right: 0
		left: 0
		bottom: 0
		height: auto !important
		width: auto !important

.chat-window-users
	change-bg('darkest')
	position: relative
	z-index: 1
	// Always show the scrollbar.
	// This fixes a bug where it was flashing the scrollbar in and out on Chrome.
	// https://github.com/gamejolt/issue-tracker/issues/454
	overflow-y: scroll !important

	@media $media-xs
		position: absolute
		top: 0
		right: 0
		bottom: 0
		left: 0
		z-index: 3

	@media $media-sm-up
		flex: 0 0 25%
		max-width: $shell-pane-width

.chat-window-main
	position: relative
	flex: auto
	display: flex
	flex-direction: column
	z-index: 1
	width: 100%

/**
 * Chat Window Header
 */
.chat-window-header-wrap
	theme-prop('color', 'light')
	flex: none
	width: 100%
	font-size: 14px

.chat-window-header
	clearfix()
	padding: $chat-room-window-padding

	h2, h3
		text-overflow()
		margin: 0
		line-height: 1
		margin-bottom: 5px

	&-avatar
		float: left
		margin-right: 15px
		width: 45px
		height: 45px

		img
			img-circle()
			display: block
			width: 45px
			height: 45px

.chat-window-header-controls
	float: right

	> .button
		position: relative
		vertical-align: top
		margin-left: 5px

/**
 * Chat Window Output
 */
.chat-window-output
	position: relative
	flex: auto
	display: flex
	height: 100%

	> .scroll-scroller
		position: absolute
		top: 0
		right: 0
		bottom: 0
		left: 0

.chat-window-send-container
	change-bg('darker')
	theme-prop('border-top-color', 'dark')
	width: 100%
	flex: none
	border-top-width: 1px
	border-top-style: solid
	padding: $chat-room-window-padding
